<template>
  <div>
    <!-- 返回 -->
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onback"
      :fixed="true"
    />
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in gallery" :key="item.id">
          <img style="width: 100%" :src="item.img_url" v-lazy="item.img_url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <AppTips money="88"></AppTips>
    <div class="goodsInfo">
      <div class="good_name">
        {{ info.name }}
      </div>
      <div class="good_brief">
        {{ info.goods_brief }}
      </div>
      <div class="good_price">
        {{ info.retail_price | RMB }}
      </div>
    </div>
    <!-- 选择规格数量 -->
    <van-cell title="请选择规格数量" is-link @click="clickshow" />
    <AppPopup
      @addnumber="addFn"
      :tempinfo="tempinfo"
      :popushow.sync="isShow"
    ></AppPopup>
    <!-- 商品参数 -->
    <div class="attr">
      <div class="canshu" style="height: 50px; line-height: 50px">商品参数</div>
      <div class="h_box">
        <h4
          style="font-size: 16px"
          v-for="(item, index) in attribute"
          :key="index"
        >
          <span style="width: 100px; display: inline-block"
            >{{ item.name }}:</span
          >
          {{ item.value }}
        </h4>
      </div>
    </div>
    <!-- 好多好多图片 -->
    <div class="goods_desc">
      <div v-html="info.goods_desc"></div>
    </div>
    <!-- 加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon
        @click="star = !star"
        :icon="star ? 'star' : 'star-o'"
        :text="star ? '已收藏' : '收藏'"
        color="#ff5000"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/Cart"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { detail } from "@/api/goods.js";
import AppTips from "../components/AppTips.vue";
import AppPopup from "../components/AppPopup.vue";
import { Toast } from "vant";
export default {
  props: ["id"],
  async created() {
    let {
      data: {
        data: { gallery, info, attribute },
      },
    } = await detail({ id: this.id });
    this.gallery = gallery;
    this.info = info;
    this.tempinfo = {
      id: info.id,
      name: info.name,
      list_pic_url: info.list_pic_url,
      goods_number: info.goods_number,
      retail_price: info.retail_price,
    };
    this.attribute = attribute;
  },
  data() {
    return {
      star: false,
      gallery: [],
      info: {},
      attribute: [],
      isShow: false,
      tempinfo: {},
      addnumber: 1,
    };
  },
  methods: {
    onback() {
      this.$router.back();
    },
    clickshow() {
      this.isShow = true;
    },
    addFn(num) {
      this.addnumber = num;
    },
    addCart() {
      let addGoods = {
        id: this.info.id,
        name: this.info.name,
        pic: this.info.list_pic_url,
        price: this.info.retail_price,
        number:this.addnumber
      };
      console.log(addGoods);
      //1,读取本地数据
      let oCartList = JSON.parse(localStorage.getItem("mycart")||'[]')
      let isAdd = true;
      oCartList.forEach(item => {
        if(item.id==addGoods.id){
          isAdd = false;
          item.number +=Number(addGoods.number)
        }
      });

      addGoods.checked=false;
      if(isAdd){
        oCartList.push(addGoods)
      }
      localStorage.setItem("mycart",JSON.stringify(oCartList));
      Toast('加入购物车成功!')
    },
  },
  components: {
    AppTips,
    AppPopup,
  },
};
</script>

<style lang="less" scoped>
.goodsInfo {
  text-align: center;
  background-color: #fff;
  padding: 14px;
  border-bottom: 1px solid rgb(153, 145, 145);
  .good_name {
    font-size: 20px;
    font-weight: 600;
  }
  .good_brief {
    font-size: 14px;
    margin: 8px;
  }
  .good_price {
    font-size: 16px;
    color: darkred;
  }
}
.van-cell {
  border-bottom: 10px solid rgb(244, 244, 244);
}
.attr {
  background-color: #fff;
  .canshu {
    font-size: 20px;
    font-weight: 600;
  }
  .h_box {
    padding: 5px;
    h4 {
      background-color: #f4f4f4;
      height: 26px;
      line-height: 26px;
      border-radius: 5px;
      margin: 2px;
    }
  }
}
/deep/.goods_desc {
  img {
    display: block;
    width: 100%;
  }
}
/deep/.van-goods-action {
  z-index: 9999;
}
</style>
